<template>
  <div class="projects pt-[5%] box-border">
    <div class="projects-head w-[192px] h-[192px] rounded-[50%] p-2">
      <img
        :src="getImageAbsolutePath('tx.jpg')"
        alt=""
        class="w-full h-full rounded-[50%]"
      />
    </div>

    <div class="f-c-c p-[40px] box-border">
      <div class="text-center text-[#fff]">
        <div class="text-[2.5rem]">CHUN ZHENG 的项目介绍</div>

        <div class="text-[#eee] my-[10px]">有趣的人记录有趣的事</div>

        <div class="mb-[20px]">
          <n-icon size="20" class="mr-[20px]" @click="navigateTo('/')">
            <Home />
          </n-icon>
          <n-icon size="20"><Resize @click="fullScreen" /></n-icon>
        </div>

        <n-tabs type="line" animated>
          <n-tab-pane name="all" tab="全部"> </n-tab-pane>
          <n-tab-pane name="vue" tab="vue"> </n-tab-pane>
          <n-tab-pane name="react" tab="react"> </n-tab-pane>
          <n-tab-pane name="nuxt" tab="nuxt"> </n-tab-pane>
          <n-tab-pane name="uniapp" tab="uniapp"> </n-tab-pane>
        </n-tabs>
      </div>
    </div>

    <div class="center">
      <div class="rojects-main">
        <Projects-list :mainList="mainList" />
      </div>

      <div class="h-[50px]"></div>
    </div>

    <n-float-button
      :right="50"
      :bottom="50"
      shape="circle"
      type="primary"
      @click="scrollToTop()"
    >
      <n-icon>
        <ArrowUp />
      </n-icon>
    </n-float-button>
  </div>
</template>

<script setup lang="ts">
import { getImageAbsolutePath } from "~/utils/tool";
import { Home, Resize, ArrowUp } from "@vicons/ionicons5";

const mainList = ref([  
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 2,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 3,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
]);
</script>

<style lang="less">
.projects {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;

  .projects-head {
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.075);
  }

  .n-tabs-tab__label {
    color: #fff !important;
  }

  .rojects-main {
    column-count: 2;
    column-gap: 20px;
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media screen and (max-width: 900px) {
  .rojects-main {
    column-count: 1 !important;
  }
}
</style>
